<!DOCTYPE >
<html  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <th:block th:include="header.html"></th:block>
    <title>Basic Line Chart</title>
</head>
<body class="container" style="height: auto;overflow: hidden;">
<div id="chart" style="height: 500px;"></div>
</body>
<script type="text/javascript">
    $(function() {
        showchart();
    })
    function showchart() {
        var echart = echarts.init(document.getElementById('chart'));
        echart.clear();
        echart.showLoading();
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [{
                type: 'pie',
                data: [{
                    value: 100,
                    name: 'A'
                }, {
                    value: 200,
                    name: 'B'
                }, {
                    value: 300,
                    name: 'C'
                }, {
                    value: 400,
                    name: 'D'
                }]
            }]
        };
        echart.setOption(option);
        echart.hideLoading();
    }
</script>
</html>